<template>
  <uni-nav-bar title="新增商家" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package center list" v-if="infor">
    <image :src="infor.image" mode=""></image>
    <view class="direction-start">
      <view>{{infor.name}} （{{infor.id}}）</view>
      <view style="margin-top: 15rpx;" @click="telCall(infor.phone)">{{infor.phone}}</view>
    </view>
  </view>
  <view class="space-between ability">
    <view v-for="item in list" :key="item.name" @click="navTo(item.push+'?name='+infor.name+'&id='+shopID)">{{item.name}}</view>
  </view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { telCall } from '@/utils/copyText';
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { toPublish } from '@mqtt';
  import { getStoreInfo } from '@/gql/administrator';
  import { showLoading } from '@/utils/prompt';
  const list = ref([{ name: '福利券列表', push: 'administrator/business/goodsList' }, { name: '员工', push: 'administrator/business/staffList' }])
  const shopID = ref()
  const infor = ref()
  onLoad((pearm) => {
    shopID.value = Number(pearm.id)
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getStoreInfo,
      variables: {
        id: shopID.value,
      },
    };
    toPublish(
      'ql/control/getStoreInfo',
      payload,
      (obj : any) => {
        const { getStoreInfo } = obj.data;
        infor.value = getStoreInfo
      }
    );
  }
</script>

<style scoped lang="less">
  .ability {
    width: 96%;
    margin: 0rpx auto;

    view {
      width: 49%;
      height: 118rpx;
      background: #FFFFFF;
      box-shadow: 0px 0px 16rpx 0px rgba(179, 179, 179, 0.44);
      border-radius: 10rpx;
      text-align: center;
      line-height: 118rpx;
    }
  }

  .list {
    image {
      width: 97rpx;
      height: 97rpx;
      // background: #DADADA;
      border-radius: 5px;
      margin-right: 20rpx;
    }
  }
</style>